<template>
  <div class="header">
    <a href="#/">
      <img class="logo" src="@/assets/logo1.png" width="40px" />
      <img class="logo2" src="@/assets/logo2.png" width="70px" />
      <span class="texts">欢迎进入一点冰后台管理系统！</span>
    </a>
    <el-dropdown @command="handleCommand" size="mini">
      <span class="el-dropdown-link">{{userName}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a" icon="el-icon-edit"
          >修改密码</el-dropdown-item
        >
        <el-dropdown-item command="b" icon="el-icon-s-unfold"
          >退出系统</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>

    <el-dialog
      title="修改密码"
      width="460px"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :rules="rules"
        ref="pojo"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="原密码" prop="passwords1" style="height: 36px">
          <el-input v-model="pojo.passwords1" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passwords" style="height: 10px">
          <el-input v-model="pojo.passwords" type="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword('pojo')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { leave, update } from "@/api/login";
export default {
  data() {
    return {
      userName: "lb",
      dialogFormVisible: false,
      pojo: {
        heid: "",
        passwords1: "",
        passwords: "",
      },
      rules: {
        passwords1: [
          { required: true, message: "原密码不能为空", trigger: "blur" },
        ],
        passwords: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.userName = sessionStorage.getItem("userName");
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.pojo.heid = sessionStorage.getItem("userId");
    },
    updatePassword(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          if (this.pojo.passwords1 != this.pojo.passwords) {
            update(
              this.pojo.heid,
              this.pojo.passwords1,
              this.pojo.passwords
            ).then((response) => {
              if (response.data == 1) {
                this.dialogFormVisible = false;
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.pojo.passwords1 = "";
                this.pojo.passwords = "";
              } else {
                this.$message({
                  type: "info",
                  message: "修改失败,密码错误！",
                });
                this.pojo.passwords1 = "";
                this.pojo.passwords = "";
              }
            });
          } else {
            this.$message({
              message: "未修改,两次密码相同！",
              type: "error",
            });
            this.pojo.passwords1 = "";
            this.pojo.passwords = "";
          }
        } else {
        }
      });
    },
    handleCommand(command) {
      switch (command) {
        case "a":
          this.dialogFormVisible = true;
          break;
        case "b":
          leave(sessionStorage.getItem("userId")).then((response) => {
            if (response.data.code == 200) {
              sessionStorage.removeItem("userId");
              sessionStorage.removeItem("userName");
              this.$router.push("/login");
            } else {
              this.$message({
                message: response.data.message,
                type: "error",
              });
            }
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped>
.texts {
  position: absolute;
  color: white;
  font-size: 10px;
  left: 42%;
}
.logo {
  vertical-align: middle;
  padding: 0px 0px 0px 10px;
}
.logo2 {
  vertical-align: middle;
  padding: 0px 10px 0px 0px;
}
.el-dropdown {
  margin-right: 30px;
  float: right;
}
.el-dropdown-link {
  color: #dfdfdf;
  cursor: pointer;
}
.el-dropdown-link {
  font-size: 6px;
}
</style>